<template>
<div>
  <h2 v-if="firstView">请输入用户名搜索</h2>
  <h2 v-if="loading">LOADING~~~</h2>
  <h2 v-if="errorMsg">{{errorMsg}}</h2>
  <div class="row">
    <div class="card" v-for="(user,index) in users" :key="index">
      <a :href="user.url" target="_blank">
        <img :src="user.avatar_url" style='width: 100px'/>
      </a>
      <p class="card-text">{{ user.name }}</p>
    </div>
  </div>
</div>
</template>

<script>
import PubSub from 'pubsub-js'
import axios from 'axios'

export default {
  name: "Main",
  data(){
    return{
      firstView:true,
      loading:false,
      users: [
        // {url:'',avatar_url:'',name:''},
      ],
      errorMsg:''
    }
  },
  mounted() {
    /*订阅消息*/
    PubSub.subscribe('search2',(msg,searchName) => {/*需要发送ajax请求机型搜素*/
      const url = `https://api.github.com/search/users?q=${searchName}`; /*这里必须使用 `` 符号，才会被识别*/

      /*更新loading状态*/
      this.firstView = false;
      this.loading = true;
      this.users = null;
      this.errorMsg = '';

      /*发送ajax请求*/
      axios.get(url).then(response => {
        const result = response.data;
        const users = result.items.map(item => ({
          url:item.html_url,avatar_url:item.avatar_url,name:item.login
        }))

        /*更新状态*/
        this.loading = false;
        this.users = users;
      }).catch(error => {
        this.loading = false;
        this.errorMsg = '请求失败'
      })
    })
  }
}
</script>

<style scoped>
.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}

.card > img {
  margin-bottom: .75rem;
  border-radius: 100px;
}

.card-text {
  font-size: 85%;
}
</style>
